$borderColor: #bbb;

.free-spinner {
  position: relative;
  display: inline-flex;
  border: 1px solid $borderColor;
  overflow: hidden;
  border-radius: 2px;

  .free-spinner-minus,
  .free-spinner-add {
    position: relative;
    display: inline-flex;
  }

  input {
    background: transparent;
    border: none;
    padding: 0 .2rem;
    min-width: 1.5rem;
    max-width: 2rem;
    text-align: center;
  }

  .free-spinner-minus,
  .free-spinner-add {
    width: 1.5rem;
    height: 1.5rem;
    background: #f9f9f9;
    cursor: pointer;
    border: none;
  }

  .free-spinner-minus {
    border-right: 1px solid $borderColor;
    &:active {
      background: #ddd;
    }

    &:disabled {
      opacity: .8;
      &:before {
        background: silver;
      }
    }

  }

  .free-spinner-add {
    border-left: 1px solid $borderColor;
    &:active {
      background: #ddd;
    }

    &:disabled {
      opacity: .8;

      &:before {
        background: silver;
      }

      &:after {
        background: silver;
      }
    }
  }

  .free-spinner-minus:before,
  .free-spinner-add:before,
  .free-spinner-add:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: $borderColor;
    transform: translate3d(-50%, -50%, 0);
  }

  .free-spinner-minus:before,
  .free-spinner-add:before {
    width: .4rem;
    height: .1em;
  }

  .free-spinner-add:after {
    height: .4rem;
    width: .1em;
  }
}
